<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:permission="http://111.67.194.242/permission"
      layout:decorate="frame/rightBarFrame">
<head>
  <title>搜索</title>
  <!-- 这里可以引入该页面css文件 -->
  <link rel="stylesheet" type="text/css" href="/css/cardCreator.css">
  <link rel="stylesheet" type="text/css" href="/css/search.css">
  <script src="/js/suggestBox.js"></script>
</head>
<body>
<div >
  <div layout:fragment="content">
    <div style="display: flex;width: 100%;    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;">
      <div class="searchBox" style="position: relative;background: transparent;box-shadow: none;margin-top: -20vh;">
        <div class="innerBox">
          <form class="searchContentBox" action="/search">
            <select name="platform" class="platformSelect">
              <option th:each="search:${searchList}" th:value="${search.val}" th:text="${search.text}"></option>
            </select>

            <span class="searchBar">
						<input id="search" type="text" class="search" name="key" autocomplete="off"/>
					</span>
            <span class="searchBtnBox">
						<button id="searchBtn" class="searchBtn">
							<i class="fa fa-search"></i>
							<span>搜索</span>
						</button>
					</span>
          </form>
          <div class="suggestBox" id="suggestBox">
            <!--<div class="suggestItem" index="0" key="迪迦奥特曼">迪迦奥特曼</div>
            <div class="suggestItem" index="1" key="泰罗奥特曼">泰罗奥特曼</div>
            <div class="suggestItem" index="2" key="欧布奥特曼" >欧布奥特曼</div>
            <div class="suggestItem" index="3">泽塔奥特曼</div>
            <div class="suggestItem" index="4">盖亚奥特曼</div>-->
          </div>
        </div>
      </div>

      <div class="footer">
        <div id="verse">
          [( ${config.verse} )]
        </div>
        <div id="announce">
          <p>本站内容均从互联网收集而来，仅供交流学习使用，版权归原创者所有</p>
          <p >如有侵犯了您的权益，尽请通知我们，本站将及时删除侵权内容。</p>
        </div>
      </div>
    </div>
  </div>


  <div layout:fragment="toolbar">
    <a permission:login href="/user/history" title="历史记录"><i class="frame_jfa fa fa-book"></i></a>
  </div>
  <div layout:fragment="script">
    <script>
      var tipsBox = {};
      var searcher = {};
      SuggestBox({
        rootDom: $("#suggestBox"),
        activeClass: "activeSuggestItem",
        onChange: function(old ,newDom){
          searcher.text($(newDom).text());
        },
        onSelected: function(selected){
          searcher.search($(selected).text());
        }
      }, tipsBox);
      SuggestBox.suggest(util.getParameter().get("key"), function(list){
        var suggestBox = document.getElementById("suggestBox");
        suggestBox.innerHTML = "";
        for(var i = 0, l = list.length; i < l; i ++){
          var item = list[i];
          var li = util.createTag("div", "suggestItem");
          li.setAttribute("key", item);
          li.innerHTML = item;
          suggestBox.appendChild(li);
        }
      })
      Search({
        dom: $("#search"),
        focus: () => tipsBox.show(),
        blur: () => tipsBox.hide(),
        input: (e) => SuggestBox.suggest($(e.target).val()),
        submit: (text) => {tipsBox.hide();$("#searchBtn").click();}
      }, searcher);

      // 初始化搜索引擎
      let platform = util.getParameter().get("platform");
      platform = util.getDefault(platform, "iqiyi");
      $("select [value="+platform+"]").attr("selected", true);

      $(document.body).css("opacity", "0");
      $(document.body).animate({opacity:1}, 500);
    </script>
  </div>
</div>
</body>
</html>
